<template>
  <el-form :model="form" :rules="rules" ref="passwordForm" label-width="120px" label-position="right">
    <el-form-item label="当前密码" prop="oldPassword">
      <el-input v-model.trim="form.oldPassword" type="password" show-password placeholder="请输入当前密码" />
    </el-form-item>

    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model.trim="form.newPassword" type="password" show-password placeholder="8-20位字母和数字组合" />
      <div class="password-strength">
        <div :class="['strength-bar', strengthClass]"></div>
        <span class="strength-text">{{ strengthText }}</span>
      </div>
    </el-form-item>

    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model.trim="form.confirmPassword" type="password" show-password placeholder="请再次输入新密码" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">确认提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 密码强度计算
const checkStrength = (value) => {
  let modes = 0
  if (value.length < 1) return 0
  if (/\d/.test(value)) modes++ // 数字
  if (/[a-z]/.test(value)) modes++ // 小写
  if (/[A-Z]/.test(value)) modes++ // 大写
  if (/\W/.test(value)) modes++ // 特殊字符
  return modes
}

import { changePassword } from '@/api/user'

export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          token: '',
        }
      }
    }
  },
  data() {
    const validateConfirm = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, trigger: 'blur', message: '请输入当前密码' }
        ],
        newPassword: [
          { required: true, trigger: 'blur', message: '请输入新密码' },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/,
            message: '密码必须8-20位且包含字母和数字'
          }
        ],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '请确认密码' },
          { validator: validateConfirm, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    strengthClass() {
      const strength = checkStrength(this.form.newPassword)
      return `strength-${strength}`
    },
    strengthText() {
      const strength = checkStrength(this.form.newPassword)
      const texts = ['弱', '中', '强', '非常强']
      return texts[Math.min(strength, 3) - 1] || ''
    }
  },
  methods: {
    submit() {
      if (this.form.newPassword !== this.form.confirmPassword) {
        return this.$message.error('两次输入的密码不一致')
      }
      try {
        // this.$store.dispatch('user/changePassword', this.form)
        changePassword(this.form).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '密码更新成功',
              type: 'success',
              duration: 1 * 1000
            })
          } else {
            this.$message.error(res.message)
          }
        })
      }
      catch (error) {
        this.$message.error(error.message)
      }
    }

  }
}
</script>

<style scope>
.password-strength {
  margin-top: 8px;
}

.strength-bar {
  height: 4px;
  width: 200px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.strength-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: all 0.3s;
}

.strength-1::after {
  width: 33%;
  background: #ff4d4f;
}

.strength-2::after {
  width: 66%;
  background: #faad14;
}

.strength-3::after,
.strength-4::after {
  width: 100%;
  background: #52c41a;
}

.strength-text {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
}
</style>